<!--
 * @Author: g05047
 * @Date: 2021-07-28 17:01:44
 * @LastEditors: g05047
 * @LastEditTime: 2021-09-01 13:33:20
 * @Description: file content
-->
<template>
  <div class="setUp">
    <el-row type="flex" class="setUp_select">
      <el-col :span="2">
        <span>功能模块</span>
      </el-col>
      <el-col>
        <el-checkbox-group v-model="func" @change="selectChange">
                <el-checkbox
                  :label="item.moduleFullName"
                  v-for="item in funcList"
                  :key="item.id"
                  style="padding-bottom:10px"
                ></el-checkbox>
        </el-checkbox-group>
      </el-col>

    </el-row>
    <el-row type="flex" class="setUp_tabs" v-if="tabsList.length>0">
      <!-- <el-tabs tab-position="left">
        <el-tab-pane
          :label="item.moduleFullName"
          v-for="(item, index) in tabsList"
          :key="item.moduleFullName"
        >
          <span slot="label"
            ><i
              class="el-icon-top"
              @click.stop="onUpSort(index, item)"
              style="padding-right:10px"
              v-if="index != 0"
            ></i>
            <i
              class="el-icon-bottom"
              @click.stop="onDownSort(index, item)"
              style="padding-right:10px"
              v-if="index < tabsList.length - 1"
            ></i>

            {{ item.moduleFullName }}{{ index }}{{ item.moduleSort }}</span
          >
          <el-row class="pane_right">
            <span>功能模块要求</span>
          </el-row>
          <set-table ref="setTable" :modulesList="item" :sort="index" />
          <el-row type="flex" style="padding:20px 0 0 20px" v-if="showSave">
            <el-button type="primary" @click="save">保存</el-button>
          </el-row>
        </el-tab-pane>
      </el-tabs> -->
      <el-col :span="4" >
        <ul>
          <li v-for="(item, index) in tabsList" :key="item.moduleName" :class="activeName == item.moduleFullName ? 'active' : '' " @click="onClick(item.moduleFullName)">
            <i
              class="el-icon-top"
              @click.stop="onUpSort(index, item)"
              style="padding-right:10px"
              v-if="index != 0"
            ></i>
            <i
              class="el-icon-bottom"
              @click.stop="onDownSort(index, item)"
              style="padding-right:10px"
              v-if="index < tabsList.length - 1"
            ></i>
            <label>{{ item.moduleFullName }}</label>
          </li>
        </ul>
      </el-col>
      <el-col :span="20" >
         <el-row class="pane_right">
            <span>功能模块要求</span>
          </el-row>
          <el-row  v-for="(item, index) in tabsList" :key="item.moduleName">
            <set-table ref="setTable" :modulesList="item" :sort="index"  v-show="item.moduleFullName == activeName"/>
          </el-row>

          <el-row type="flex" style="padding:20px 0 0 20px" v-if="showSave">
            <el-button type="primary" @click="save">保存</el-button>
          </el-row>
        </el-tab-pane>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Sortable from 'sortablejs';
import SetTable from './components/setTable';

export default {
  name: 'setUp',
  props: {},
  components: { SetTable },
  data() {
    return {
      // 功能模块列表
      funcList: [],
      func: [],
      tabsList: [],
      showSave: false,
      // 模块分类
      modulesCate: [],
      isEdit: false,
      activeName:''
    };
  },
  computed: {},
  created() {
    this.getFunctionModules();
    this.getModulesCate();
    this.getSetInfo();
  },
  mounted() {
    // this.rowDrop();
  },
  methods: {
    //获取功能模块
    async getFunctionModules() {
      try {
        const res = await this.$http.getFunctionModules({
          isOpen: 1,
          isPage: 1,
          isTaskItem: '',
          page: 1,
          pageSize: 0,
          searchValue: '',
        });

        if (res.code !== 200) return this.$message('请求失败！' + res.msg);
        this.funcList = res.data;
      } catch (err) {}
    },
    async getModulesCate() {
      const searchValue = this.$route.query.bodyIndustry;

      try {
        const res = await this.$http.getModulesCate({
          isPage: 1,
          isOpen: 1,
          searchValue,
          isSpecialFood: this.$route.query.isSpecialFood,
        });

        if (res.code !== 200) return this.$message('请求失败！' + res.msg);

        this.modulesCate = res.data.map(item => {
          return {
            accordingRequirements: '',
            bodyIndustry: item.bodyIndustry,
            bodyIndustryRemarks: item.bodyIndustryRemarks,
            frequencyNumber: 0,
            frequencyType: 6,
            functionScore: 0,
            bodyIndustryId: item.id,
            isOpen: 1,
            isRequired: '1',
            isSpecialFood: this.$route.query.isSpecialFood,
            num: 1,
            remark: '',
          };
        });
      } catch (err) {}
    },
    selectChange(value) {
      if (value.length) {
        this.showSave = true;
      } else {
        this.showSave = false;
      }
      this.tabsList = value.map((item, index) => {
        return {
          bodyIndustry: this.$route.query.bodyIndustry,
          isSpecialFood: this.$route.query.isSpecialFood,
          moduleFullName: this.funcList.filter(x => x.moduleFullName == item)[0]
            .moduleFullName,
          moduleId: this.funcList.filter(x => x.moduleFullName == item)[0].id,
          moduleName: this.funcList.filter(x => x.moduleFullName == item)[0]
            .moduleName,
          functionPermissionsSettings3SaveRequestList: this.modulesCate,
        };
      });
      this.tabsList.forEach((item, index) => {
        item.functionPermissionsSettings3SaveRequestList.forEach(cate => {
          cate.moduleId = item.moduleId;
          cate.bodyIndustryId = cate.bodyIndustryId;
          cate.isTaskItem = this.funcList.filter(
            x => x.moduleFullName == item.moduleFullName
          )[0].isTaskItem;
          cate.moduleFullName = item.moduleFullName;
          cate.moduleName = this.funcList.filter(
            x => x.moduleFullName == item.moduleFullName
          )[0].moduleName;
        });
      });
      this.activeName = this.tabsList[0].moduleFullName
    },
    rowDrop() {
      const el = document.querySelector('.el-tabs__nav');

      const _this = this;
      Sortable.create(el, {
        animation: 300,
        onEnd({ newIndex, oldIndex }) {
          //oldIIndex拖放前的位置， newIndex拖放后的位置

          const currRow = _this.tabsList.splice(oldIndex, 1)[0]; //鼠标拖拽当前的el-tabs-pane

          if (!currRow) return;
          _this.tabsList.splice(newIndex, 0, currRow); // 是存放所以el-tabs-pane的数组
        },
      });
    },
    async save() {
      let functionPermissionsSettings2SaveRequestList = [];

      let list = [];
      let flag = true;
console.log('this.$refs.setTable: ', this.$refs.setTable);
console.log(this.tabsList)
      this.$refs.setTable.forEach(item => {

        let moduleObj = {};
        moduleObj.bodyIndustry = item.module.bodyIndustry;
        moduleObj.isSpecialFood = this.$route.query.isSpecialFood;
        moduleObj.moduleFullName = item.module.moduleFullName;
        moduleObj.moduleId = item.module.moduleId;
        moduleObj.moduleName = item.module.moduleName;
        moduleObj.moduleSort = this.tabsList.findIndex(
          x => x.moduleFullName == item.module.moduleFullName
        );

        moduleObj.functionPermissionsSettings3SaveRequestList = item.module.functionPermissionsSettings3SaveRequestList.filter(
          it => it.isRequired != '2'
        );
        moduleObj.functionPermissionsSettings3SaveRequestList.forEach(func => {
          func.moduleSort = this.tabsList.findIndex(
          x => x.moduleFullName == item.module.moduleFullName
          );
          if (!func.accordingRequirements) {
            func.accordingRequirements =
              moduleObj.functionPermissionsSettings3SaveRequestList[0].accordingRequirements;
          }
        });
        list.push(
          moduleObj.functionPermissionsSettings3SaveRequestList.every(
            x => x.accordingRequirements
          )
        );
        if (
          moduleObj.functionPermissionsSettings3SaveRequestList.every(
            x => x.isRequired == '2'
          )
        ) {
          flag = false;
        }
        functionPermissionsSettings2SaveRequestList.push(moduleObj);
      });
      if (!flag) return this.$message.error('请至少选择一项！');

      if (list.includes(false))
        return this.$message.error('依据要求不能为空！');
      let saveParams = {
        bodyIndustry: this.$route.query.bodyIndustry,
        functionPermissionsSettings2SaveRequestList,
        isSpecialFood: this.$route.query.isSpecialFood,
      };
      const res = await this.$http.saveModules(saveParams);
      if (res.code !== 200) return;
      this.$message.success('保存成功！');
      this.$router.push('/settings');
    },
    async getSetInfo() {
      try {
        const res = await this.$http.getSetInfo({
          bodyIndustry: this.$route.query.bodyIndustry,
          isSpecialFood: this.$route.query.isSpecialFood,
        });

        if (res.code !== 200) return;

        if (res.data) {
          this.showSave = true;
          this.tabsList = res.data.functionPermissionsSettings2SaveRequestList.sort((a,b)=>a.moduleSort-b.moduleSort);
          this.func = res.data.functionPermissionsSettings2SaveRequestList.map(
            item => item.moduleFullName
          );
          this.tabsList.forEach(item => {
            item.functionPermissionsSettings3SaveRequestList.forEach(it => {
              if (it.frequencyNumber == null || it.frequencyType == null) {
                it.isRequired = '2';
                it.frequencyNumber = 0;
                it.frequencyType = 6;
              } else {
                it.isRequired = '1';
              }
              it.moduleFullName = item.moduleFullName;
              it.moduleName = item.moduleName;
              it.moduleId = item.moduleId;
              it.isSpecialFood = this.$route.query.isSpecialFood;
              if (it.isTaskItem == null) {
                const index = item.functionPermissionsSettings3SaveRequestList.findIndex(
                  x => x.isTaskItem != null
                );

                it.isTaskItem =
                  item.functionPermissionsSettings3SaveRequestList[
                    index
                  ].isTaskItem;
              }
              if (it.moduleSort == null) {
                const index = item.functionPermissionsSettings3SaveRequestList.findIndex(
                  x => x.moduleSort != null
                );

                it.moduleSort =
                  item.functionPermissionsSettings3SaveRequestList[
                    index
                  ].moduleSort;
              }
              if (!it.accordingRequirements) {
                const index = item.functionPermissionsSettings3SaveRequestList.findIndex(
                  x => x.accordingRequirements
                );

                it.accordingRequirements =
                  item.functionPermissionsSettings3SaveRequestList[
                    index
                  ].accordingRequirements;
              }
            });
          });
          this.activeName = this.tabsList[0].moduleFullName
        }
      } catch (err) {}
    },
    onUpSort(index, item) {
      console.log('index: ', index);

      let temp = this.tabsList[index];
      console.log('temp: ', temp);

      this.$set(this.tabsList, index, this.tabsList[index - 1]);
      this.$set(this.tabsList, index - 1, temp);
      console.log('this.tabsList: ', this.tabsList);

      return;

      let sort = this.$_.cloneDeep(this.tabsList[index].moduleSort);
      let data = this.$_.cloneDeep(this.tabsList);
      data[index].moduleSort = data[index - 1].moduleSort;
      data[index - 1].moduleSort = sort;
      console.log(JSON.stringify(data));
      this.$_.sortBy(data, item => item.moduleSort);
      this.tabsList = data;
    },
    onDownSort(index) {
      console.log('index: ', index);

      let temp = this.tabsList[index];
      console.log('temp: ', temp);
      this.$set(this.tabsList, index, this.tabsList[index + 1]);
      this.$set(this.tabsList, index + 1, temp);
      console.log('this.tabsList: ', this.tabsList);
    },
    onClick(moduleFullName) {
      this.activeName = moduleFullName

    }
  },
};
</script>

<style scoped lang="scss">
.setUp {
  padding: 30px;
  .setUp_select {
    padding: 0 0 40px 30px;
    span {
      width: 150px;
    }
  }

  ::v-deep .el-tabs__item.is-active {
    color: #fff;
    background-color: #409eff;
  }

  .pane_right {
    margin: 0 0 20px 20px;
  }
  .setUp_tabs {
    ul{
      box-sizing: border-box;
      padding-left: 0;

      li {
            height: 40px;
            line-height: 40px;
            color:#606266;
            text-align:right;
             padding-right: 20px;
             i{
               cursor: pointer;
             }

       }
       .active{

              color: #409eff;
            }

    }

  }
}
</style>
